<template>
  <div v-if="sectionList.length">
    <tab active-color='#456de6'	default-color="#fff" custom-bar-width="50%">
      <tab-item 
        @on-item-click="handler(tIndex)" 
        :selected="currentIndex === tIndex" 
        v-for="(tItem,tIndex) in sectionList" 
        :key="tIndex">{{tItem.name||tItem.processName}}
      </tab-item>
    </tab>
    <div class="tab-con">
      <div v-for="(sectionItem,sectionIndex) in sectionList"
        :key="sectionItem.name"
      >
        <series-table 
          :currentIndex="currentIndex" 
          :disabled="disabled" 
          :sectionIndex="sectionIndex" 
          :sectionItem="sectionItem"
        ></series-table>
        </div>
    </div>
  </div>
</template>

<script>
import { Tab, TabItem } from 'vux'
import seriesTable from './seriesTable'
// import seriesTab from './seriesTab'
// import seriesCon from './seriesCon'
export default {
  name: 'addData',
  data () {
    return {
      currentIndex: 0
    }
  },

  components: {
    Tab,
    TabItem,
    seriesTable
  },

  props:{
    sectionList:{
      type: Array,
      default() {
        return []
      }
    },
    disabled:{
      type: Boolean,
      default: false
    }
  },

  computed: {},

  mounted() {},

  methods: {
    handler(index){
      this.currentIndex = index
    }
  }
}

</script>
<style lang="less" scoped>
/deep/.vux-tab-wrap {
  padding-top: 40px;
  .vux-tab-container {
    height: auto;
    .vux-tab {
      // padding: 10px 0;
      // height: 60px;
      background: #1b1c32;
      .vux-tab-item{
        background: none;
        // line-height: inherit;
      }
    }
  }
}
.tab-con {
  padding: 20px 0px 0;
}

</style>